<!-- 搜索表单 -->
<template>
  <div>
    <el-form
      label-width="77px"
      class="ele-form-search"
      ref="where"
      :model="where"
      @keyup.enter.native="search"
      @submit.native.prevent
    >
      <el-row :gutter="15">
        <el-col :span="24">
          <h5 class="navList">进件列表</h5>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="商家名称:" prop="merchantName">
            <el-input
              clearable
              v-model="where.merchantName"
              placeholder="请输入商家名称"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="商户名称:" prop="merchantName">
            <el-input
              clearable
              v-model="where.businName"
              placeholder="请输入商户名称"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="所属代理:" prop="oemName">
            <el-select
              clearable
              v-model="where.oemName"
              placeholder="请选择所属代理"
              @visible-change="oemNameFn"
              class="ele-fluid"
            >
              <el-option
                v-for="(i, j) in subordinateAgentList"
                :key="j"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="进件状态:">
            <el-select
              clearable
              v-model="where.status"
              placeholder="请选择进件状态"
              class="ele-fluid"
            >
              <el-option
                v-for="(i, j) in typeList"
                :key="j"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="申请时间:" prop="dateRange">
            <el-date-picker
              v-model="where.dateRange"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              class="ele-fluid"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="审核时间:">
            <el-date-picker v-model="dateRange"
                            type="daterange"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            class="ele-fluid" />
          </el-form-item>
        </el-col> -->
        <!-- <el-col v-bind="styleResponsive ? { lg: 8, md: 12 } : { span: 8 }">
          <el-form-item label="进件类型:" prop="applyForType">
            <el-select
              clearable
              v-model="where.applyForType"
              placeholder="请选择进件类型"
              class="ele-fluid"
            >
              <el-option label="微信" :value="1" />
              <el-option label="支付宝" :value="2" />
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col>
          <div class="ele-form-actions">
            <el-button
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="search"
            >
              查询
            </el-button>
            <el-button @click="resetForm('where')">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { oemQueryAgentList } from '@/api/lncomingManagement/incomingListApi';
  export default {
    data() {
      // 默认表单数据
      const defaultWhere = {
        // 商家名称
        merchantName: '',
        // 所属代理
        oemName: '',
        // 进件状态
        status: '',
        // 申请时间
        dateRange: [],
        // 进件类型
        // applyForType: ''
        // 商户名称
        businName: ''
      };
      return {
        // 表单数据
        where: { ...defaultWhere },
        subordinateAgentList: [],
        sumbitForm: {}
      };
    },
    props: {
      typeList: Array
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    methods: {
      //  查询代理id
      async oemNameFn(status) {
        console.log(status);
        if (status) {
          const res = await oemQueryAgentList({
            limit: 10,
            oemType: 2,
            page: 1,
            parentId: this.$store.state.user.info.oemId
          });
          // 下属代理的数据
          console.log(res);

          if (res.code == 2000 && res.data.list.length) {
            const agentList = res.data.list.map((item) => {
              return {
                label: item.oemCode,
                value: item.id
              };
            });
            this.subordinateAgentList = agentList;
            console.log(this.subordinateAgentList);
          }
        }
      },

      /* 搜索 */
      search() {
        for (const key in this.where) {
          if (key == 'dateRange') {
            let startTime = this.where[key]?.[0];
            let endTime = this.where[key]?.[1];
            this.sumbitForm['startTime'] = startTime;
            this.sumbitForm['endTime'] = endTime;
          } else {
            this.sumbitForm[key] = this.where[key];
          }
        }
        console.log(this.sumbitForm);
        this.$emit('search', this.sumbitForm);
      },
      /*  重置 */
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.where = {};

        this.$emit('search', this.sumbitForm);
      }
    }
  };
</script>
<style lang="less" scoped>
  .navList {
    margin-bottom: 25px;
    font-weight: 700;
  }
</style>
